<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page"><div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Virtual List</div>
<div class="subnavbar">
<form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
</div>
</div>
</div>
<div class="searchbar-backdrop"></div>
<div class="page-content">
<div class="list simple-list searchbar-not-found">
<ul>
<li>Nothing found</li>
</ul>
</div>
<div class="list virtual-list media-list searchbar-found"></div>
</div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      // Dummy items array
      var items = [];
      for (var i = 1; i <= 10000; i++) {
        items.push({
          title: 'Item ' + i,
          subtitle: 'Subtitle ' + i
        });
      }
      
      var virtualList = app.virtualList.create({
        // List Element
        el: '.virtual-list',
        // Pass array with items
        items: items,
        // Custom search function for searchbar
        searchAll: function (query, items) {
          var found = [];
          for (var i = 0; i < items.length; i++) {
            if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
          }
          return found; //return array with mathced indexes
        },
        // List item Template7 template
        itemTemplate:
          '<li>' +
            '<a href="#" class="item-link item-content">' +
              '<div class="item-inner">' +
                '<div class="item-title-row">' +
                  '<div class="item-title">{{title}}</div>' +
                '</div>' +
                '<div class="item-subtitle">{{subtitle}}</div>' +
              '</div>' +
            '</a>' +
          '</li>',
        // Item height
        height: app.theme === 'ios' ? 63 : 73,
      });
    </script>
  </body>
</html>